<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> SimpleModal Basic Modal Dialog </title>

<meta name='author' content='Eric Martin' />
<meta name='copyright' content='2008 - Eric Martin' />

<!-- Import jQuery and SimpleModal source files -->
<script src='js/jquery.js' type='text/javascript'></script>
<script src='js/jquery.simplemodal.js' type='text/javascript'></script>

<!-- Contact Form JS and CSS files -->
<script src='js/basic.js' type='text/javascript'></script>
<link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />

<!-- IE 6 hacks -->
<!--[if lt IE 7]>
<link type='text/css' href='css/basic_ie.css' rel='stylesheet' media='screen' />
<![endif]-->

</head>
<body>
<div id='basicModal'><h2>Basic Modal Dialog</h2>
<p>A basic modal dialog with minimal styling and without any additional settings. There are a few CSS attributes set internally by SimpleModal, however, SimpleModal relies mostly on external CSS for the look and feel.</p>
<input type='button' name='basic' value='Demo' class='basic demo'/> or <a href='#' class='basic'>Demo</a>
</div>
<div id="basicModalContent" style='display:none'>
	<h1>Basic Modal Dialog</h1>

	<p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with standard HTML or with DOM element(s).</p>
	<p>Examples:</p>
	<p><code>$('#basicModalContent').modal(); // jQuery object; this demo</code></p>
	<p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p>
	<p><code>$.modal('&lt;p&gt;&lt;b&gt;HTML&lt;/b&gt; elements&lt;/p&gt;'); // HTML</code></p>

	<p><a href='http://www.ericmmartin.com/projects/simplemodal'>More details...</a></p>
</div>
</body>
</html>